<?php 
$template = $this->get_data('template');
$template = (empty($template)) ? '' : (string) $template;
?>
<div id="page_template">
<h2>Select Page Template</h2>
<select id="page_template" class="required" name="template">
    <option value=""></option>
    <?php foreach (m('app')->get_tpl_files('page') as $tpl_name): ?>
        <option <?php echo ($template == $tpl_name) ? 'selected="selected"' : '';?> value="<?php echo $tpl_name?>"><?php echo $tpl_name?></option>
    <?php endforeach;?>
</select>
<div id="page_images">
<a href="javascript:;" onclick="add_image();">Add Image</a>
    <div id="images_wrap"></div>
</div>
<div id="search_link_result"></div>
</div>
<script type="text/javascript">
<?php if ($this->get_data('images')):?>
<?php foreach($this->get_data('images') as $image):?>
create_image('<?php echo $image['src'];?>', '<?php echo $image['key'];?>', '<?php echo $image['link'];?>', '<?php echo $image['id'];?>');
<?php endforeach;?>
<?php endif;?>
function add_image() {
    cdn.show(null, function () {
        //var src = z.cdn_url(this.img_cdn_path);
        var img = create_image(this.img_cdn_path);
        
        //main_img_wrap.appendChild(img);
        this.hide();
        //form_add('thumbnail', this.img_cdn_path);
    });
    cdn.set_pos(360, 200);
}
var image_index = 0;
function create_image(src, key, link, image_id) {
    var wrap = z.s('images_wrap');
    
    var div = document.createElement('div');
    wrap.appendChild(div);
    div.className = 'item';
    key = key || '';
    link = link || '';

    div.innerHTML = 
        ['<a href="javascript:;" onclick="delete_image(this)">Delete</a><br/>',
         'Key: <input class="text" type="text" name="image[', image_index, '][key]" onchange="change_input(this)" value="', key, '"/><br/>',
         '<input type="hidden" name="image[', image_index, '][src]" value="', src, '"/>',
         'Link: <input class="text" type="text" onkeyup="search_link(this)" name="image[', image_index, '][link]" value="', link, '"/><br/>',
         '<img src="',z.cdn_url(src), '" />'].join('');

    if (image_id) {
        div.image_id = image_id;
    } else {
        var inputs = div.getElementsByTagName('input');
        for (var i in inputs) {
            inputs[i].changed = true;
        }
    }
    
    image_index++;
}
function change_input(target) {
    target.changed = true;
}
function delete_image(target) {
    if (confirm('Are you sure you want to remove this image?')) {
        var div = target.parentNode;
        var wrap = div.parentNode;
        if (div.image_id) {
            form_add('delete_image_ids[' + div.image_id + ']', div.image_id);
        }
        wrap.removeChild(div);
    }
}
var current_input_link;
function search_link(target) {
    current_input_link = target;
    var q = target.value;
    var asr = z.s('search_link_result');


    if (q == '') {
        asr.style.display = 'none';
        return;
    };
    asr.style.display = 'block';
    asr.style.left = target.offsetLeft + 'px';
    asr.style.top = (target.offsetTop + 20) + 'px';
    asr.innerHTML = '<div class="item"><img src="' + z.cdn_url('img/icon/loading3.gif') + '" alt="loading"/></div>';
    var url = z.site_url('?m=node&a=link_search&method=ajax&q=' + q);
    z.net.get(url,null, function (xhr) {
        var html = xhr.responseText;
        if (html == '') {
            asr.style.display = 'none';
        } else {
            asr.innerHTML = z.highlight(xhr.responseText, q,'<font style="font-weight:bold; color:#000000">', '</font>');//xhr.responseText.replace(q, '<b>' + q + '</b>');
            asr.style.display = 'block';
        }
    });
}

function add_link(link) {
    current_input_link.value = link;
    current_input_link.changed = true;
    z.s('search_link_result').style.display = 'none';
}
</script>